import { html, PageComponent } from 'nvagir'
import MainSideBar from '../../components/MainSideBar/MainSideBar'
import './Article.less'
const Article: PageComponent = () => {
  /*
  Get the name of the following author and 
  save in formData 
  */
  const followID = () => {
    var User = (<HTMLBodyElement>document.querySelector('.Name')).textContent
    const formData = new FormData()
    formData.append('follow', User!)
    console.log(formData.forEach((v, k) => console.log(`key=${k}, val=${v}`)))
    alert('follow ' + User + ' successfully!')
  }

  /*
  Article layout
  */
  const { el } = html`
    <div class="article-page">
      ${MainSideBar()}
      <div class="article-content">
        <div class="top">
          <div class="author">
            <div class="personal-image"></div>
            <div class="personal-content">
              <div class="info">
                <p class="Name">SamonA</p>
                <div class="intro">雅思8.5 美国TESOL对外英语教师</div>
              </div>
            </div>
          </div>
          <button type="button" class="follow-button" n@click=${followID}>
            关注
          </button>
        </div>
        <div class="title-image"></div>
        <div class="main-post">
          <div class="post-head">
            <h1 class="post-title">
              吐血总结！雅思写作Task 1（小作文、图表作文）各题型攻略解析
            </h1>
          </div>
          <div class="text-content">
            <p class="text-bold">
              吐血总结！雅思写作，看完这一篇，你将进入无人之境，彻底亮瞎周围！
              ⚠这不是一个备考经验帖，不是经验帖！
            </p>
            <p>
              接下来用30分钟的完整时间仔细阅读以下内容，边读边做笔记
              你会感觉相见恨晚的，一股股写作思绪的清流在脑海里不断涌动
              认真学习后相信你的作文不会低于7分的。
            </p>
            <p>
              时常发现各位烤鸭们的备考资料实在太多，尤其是小作文
              ，各种表格、各种范文，可是很多时候，看得越多，越是一脸懵逼，
              因为资料太多太乱了，而不会分类归纳和总结。
            </p>

            <h2>- Task 1 小作文部分 -</h2>
            <p>
              Part 1：线形图（Line Graph） Part 2：柱状图（Bar Chart） Part
              3：饼状图（Pie Chart） Part 4：表格（Table） Part 4：表格（Table）
              Part 6：地图题（Map） Part 7：混合图、疑难图（Mixed Charts）
            </p>
            <p class="text-bold">Part 1：线形图（Line Graph）</p>
            <p class="part">一、线形图数据的描写</p>
            <p>
              线形图的基本特征就是，随着一段时间的推移，图里的元素发生升高
              、降低或者不变的趋势。所以，我们需要掌握基本动词的表达。
            </p>
            <p>
              有些烤鸭们会准备一大张纸，上面抄满了各种表示不同特征的词和句式
              ，到考试前就背呀背，其实这不一定是最好的办法。
            </p>
            <p>
              英语谚语有云Less is
              more（少就是多），我的经验是：不要太多，不要太多！
              每一类的表达，掌握三个就足够了，因为各种表达如果太多的话，
              到了考场真正考试时可能会记不住，而且，就算记住了，记得越多，
              使用时混淆或者用错的可能性就越高。线形图里最基本的特征有升高和降低，
              可以用“动词+副词”或“形容词+名词”这两种表达，他们可以相互转化;
            </p>
            <p>
              另外，还有线形图常出现的波动、保持平稳、到达最高或最低点，这样的表达每一类能记住两个就可以了。
            </p>
            <p class="part">二、描述线形图的句型</p>
            <p class="text-col">
              句型一：The price of textbooks fell sharply in 2019. 句型二：There
              was a rapid decrease in the price of textbooks in 2019.
              句型三：The year 2019 witnessed a dramatic drop in the price of
              textbooks. 句型四：A sharp fall in the price of textbooks took
              place in 2019. 句型五：The price of textbooks showed a downward
              trend in 2019.
            </p>
            <p>
              记住，每一种句型之间都是可以相互转化的，目的就是写作时能做到每种句型的运用游刃有余。
              各位需要多加练习和运用，目的是做到能在写作时随便就可以写出来，这样你必定是烤鸭界里最靓的仔哈哈！
            </p>
          </div>
        </div>
      </div>
    </div>
  `
  return { el }
}
export default Article
